<template>
  <div style="margin-left: 10%;">
    <div style="padding: 10px 5%;  width: 80%; height: 85vh; background-color: #fafafa; border-radius: 10px; box-shadow: 0 2px 4px rgba(0,0,0,.14);">
      <div style="width: 250px; height: 150px; margin: 50px 0 0 40%; font-size: 20px; font-weight: bold;color: coral;">商家服务评分</div>
      <div style="border: #d1d9e6 1px solid;margin-top: -60px"></div>

      <div style="width: 90%; height: 25%; margin-left: 5%; padding: 20px 0 0 20%; margin-top: 5px;">
        <el-form :label-position="labelPosition" label-width="180px" :model="shopperService" class="custom-label">
          <!--订单编号-->
          <el-form-item label="订单编号" style="width: 350px; text-align: left; margin-top: 5px; padding-top: 10px;">
            <el-input v-model="shopperService.orderCode" placeholder="请输入订单编号"></el-input>
          </el-form-item>
          <!--商家确认订单-->
          <el-form-item label="确认订单速度" style="text-align: left; margin-top: 5px; padding-top: 10px;">
            <el-rate v-model="shopperService.checkSpeed" style="margin-top: 5px;font-size: 20px;font-weight: bold;margin-left: 40px"></el-rate>
          </el-form-item>
          <!--商家订单价格-->
          <el-form-item label="商家树苗价格" style="text-align: left; padding-top: 10px;">
            <el-rate v-model="shopperService.orderPrice" style="margin-top: 5px;font-size: 20px;font-weight: bold;margin-left: 40px"></el-rate>
          </el-form-item>
          <!--用户满意程度-->
          <el-form-item label="用户满意程度" style="text-align: left; padding-top: 10px;">
            <el-rate v-model="shopperService.userMeet" style="margin-top: 5px;font-size: 20px;font-weight: bold;margin-left: 40px"></el-rate>
          </el-form-item>
          <!--树苗质量-->
          <el-form-item label="树苗质量评分" style="width: 350px; text-align: left; margin-top: 5px; padding-top: 10px;">
            <el-rate v-model="shopperService.treeQuality" style="margin-top: 5px;font-size: 20px;font-weight: bold;margin-left: 40px"></el-rate>
          </el-form-item>
          <!--系统导购评分-->
          <el-form-item label="系统导购服务" style="text-align: left; padding-top: 10px;">
            <el-rate v-model="shopperService.guideService" style="margin-top: 5px;font-size: 20px;font-weight: bold;margin-left: 40px"></el-rate>
          </el-form-item>
          <!--提交反馈-->
          <el-form-item style="text-align: left; padding-top: 10px;">
            <el-button @click="cancel">取消评价</el-button>
            <el-button type="primary" @click="submit">提交评价</el-button>
          </el-form-item>


        </el-form>
      </div>

    </div>

  </div>
</template>

<script>

import request from "@/utils/request";

export default {
  name: "shopperserviceview",
  data() {
    return {
      user: sessionStorage.getItem("user") ? JSON.parse(sessionStorage.getItem("user")) : {},
      labelPosition: 'right',
      shopperService: {
        orderCode: '',
        checkSpeed: 0,
        orderPrice: 0,
        userMeet: 0,
        treeQuality:0,
        guideService: 0,
      }
    }
  },
  created() {

  },
  methods: {
    cancel(){
      this.shopperService.orderCode = "";
      this.shopperService.checkSpeed = 0;
      this.shopperService.orderPrice = 0;
      this.shopperService.userMeet = 0;
      this.shopperService.treeQuality = 0;
      this.shopperService.guideService = 0;
    },
    submit(){
      //首先检查用户有没有输入
      if (this.shopperService.orderCode === "") {
        this.$message.warning("请输入订单编号")
      } else if (this.shopperService.checkSpeed === 0 && this.shopperService.orderPrice === 0 && this.shopperService.userMeet === 0 && this.shopperService.guideService === 0) {
        this.$message.warning("请至少评价一条")
      } else {
        request.post("/order/evaluate/" + this.user.userId,this.shopperService).then(res => {
          if (res.code === '0') {
            this.$message.success("评价提交成功,感谢配合")
          } else {
            this.$message.error(res.msg)
          }
        })
      }
    },
  }
}
</script>

<style>

.custom-label {
  .el-form-item__label {
    font-size: 16px;
    font-weight: bold;
  }
}

</style>